<template>
  <div class="list-wrap">
    <router-link class="item"
                 v-for="item of list"
                 :key="item.content"
                 tag="li"
                 :to="item.url">
      <div class="icon-wrap">
        <i class="iconfont"
           :class="item.className"></i>
      </div>
      <div class="content"
           border-bottom-1px>
        <div class="desc">{{item.content}}</div>
        <i class="iconfont">&#xe6bf;</i>
      </div>
    </router-link>
  </div>
</template>
<script>
export default {
  name: 'NotFound',
  data () {
    return {
      list: [
        {
          content: '订单列表',
          className: 'icon-dingdan',
          url: '/me/order'
        },
        {
          content: '发起会议',
          className: 'icon-faqi',
          url: '/me/meeting'
        },
        {
          content: '我的钱包',
          className: 'icon-qianbao2',
          url: '/me/wallet'
        },
        {
          content: '我的收藏',
          className: 'icon-shoucang',
          url: '/me/collect'
        },
        {
          content: '我的分享',
          className: 'icon-fenxiang',
          url: '/me/share'
        },
        {
          content: '问题反馈',
          className: 'icon-wentifankui',
          url: '/me/feedback'
        },
        {
          content: '关于我们',
          className: 'icon-guanyu',
          url: '/me/about'
        }
      ]
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.list-wrap
  width 100%

  .item
    width 100%
    height 110px
    display flex
    align-items center
    justify-content space-between
    padding-right 24px
    box-sizing border-box

    &:active
      background-color $recommend_title

    .icon-wrap
      width 82px
      text-align center
      line-height 110px

      i
        background linear-gradient(0deg, rgba(255, 87, 34, 1), rgba(255, 163, 133, 1))
        font-size $back_fz
        color transparent
        -webkit-background-clip text
        background-clip text

    .content
      flex 1
      height 100%
      text-indent 22px
      font-size $shop_name
      font-weight 500
      color $footer_bgc
      display flex
      justify-content space-between
      align-items center

      i
        font-size $common_fz
        color $arrow_color
</style>
